<template>
 <div>
  <div v-if="message.length>0" class="photoData">
     <van-image v-for="(value,index) in photoDatas" :key="index"   lazy-load :src="value.img_1280_1024" @click="lookPhoto" :id="index">
        <template v-slot:loading>
          <van-loading type="spinner" size="20" />
        </template>
     </van-image>
  </div>
  <van-pagination v-model="currentPage" :page-count="30" mode="simple" @change="changPage" />
  
 </div>

</template>

<script>
import Index from "./Index"
import axios from "axios"
import {ImagePreview} from "vant"
export default {
    name:"one",
    components:{
        Index
    },
    data(){
      return {
       datas:[],
       photoDatas:[],
      photoDatas2:[],
       currentPage:1,
       startPage:0,
       Page:0
      }
    },
    mounted(){
        let url="/photos/index.php?c=WallPaper&a=getAllCategoriesV2&from=360chrome";
        axios.get(url).then(value=>{
          this.datas=value.data.data //关键词
        }).catch(err=>{
         console.log(err)
        })
  },
    computed:{
      //计算当前路由状态下，展示的图片
      message:function(){
         this.currentPage=0;
        if(this.datas.length>0){
           let res= this.datas.filter(value=>{
              if(value.id===this.$route.name){
                return true
               }
            })
          return res; //返回符合条件的图片目标类型
        } 
        else{
          return [];
        }
      }  
    },
    watch:{
      message:function(){
              this.currentPage=0;
              if(this.message.length>0){
                    let url1="/message/index.php?c=WallPaper&a=getAppsByCategory&cid="+this.message[0].id+"&start=0&count=21&from=360chrome"   
                    axios.get(url1).then(value=>{
                      this.photoDatas=value.data.data;
                    }).catch(err=>{
                      console.log("出错了"+err)
                    })
                }
      }
    },
    methods:{
      lookPhoto(e){
        let images=this.photoDatas.map(value=>{
          return value.img_1280_1024
        })
        ImagePreview(
              {
              images:images,
              closeable: true,
             startPosition: Number(e.path[1].id),
            }
        );
      },
      changPage(value){
       if(value>=this.Page){
         this.Page=value;
          if(this.message.length>0){
              this.startPage=this.startPage+21;
              let url1="/message/index.php?c=WallPaper&a=getAppsByCategory&cid="+this.message[0].id+"&start="+this.startPage+"&count=21&from=360chrome"   
              axios.get(url1).then(value=>{
                this.photoDatas=value.data.data
              }).catch(err=>{
                console.log("出错了"+err)
              })
          }
       }
       else{
           this.Page=value;
          if(this.message.length>0){
              this.startPage=this.startPage-21;
              let url1="/message/index.php?c=WallPaper&a=getAppsByCategory&cid="+this.message[0].id+"&start="+this.startPage+"&count=21&from=360chrome"   
              axios.get(url1).then(value=>{
                this.photoDatas=value.data.data
              }).catch(err=>{
                console.log("出错了"+err)
              })
          }
       }
       
        
      }
    }
}
</script>

<style>
.photoData .van-image{
  width: 33.3333%;
  height: 33.3333%;
}

</style>